<template>
    <div class="app-container"  >

        <!--新增编辑界面-->
        <el-form ref="dataForm" :model="dataForm" :rules="dataFormRules" label-width="140px" style="width:80%">
            <el-form-item   label="用户名" prop="username" >
                <el-input   v-model="dataForm.username" size="mini" auto-complete="off" />
            </el-form-item>
            <el-form-item   label="真实姓名" prop="realname" >
                <el-input   v-model="dataForm.realname" size="mini" auto-complete="off"  />
            </el-form-item>
            <el-form-item   label="用户头像" prop="avatar" >
                <cm-upload  v-model="dataForm.avatar"  ></cm-upload>
            </el-form-item>
            <el-form-item   label="性别" prop="avatar" >
            <el-radio-group v-model="dataForm.sex">
                <el-radio  label="1"  > 男  </el-radio>
                <el-radio  label="0"  > 女  </el-radio>
            </el-radio-group>
            </el-form-item>
            <el-form-item   label="手机号码" prop="phone" >
                <el-input   v-model="dataForm.phone" size="mini" auto-complete="off"  />
            </el-form-item>
            <el-form-item   label="邮箱" prop="email" >
                <el-input   v-model="dataForm.email" size="mini" auto-complete="off"  />
            </el-form-item>
            <el-form-item   >
                <el-button :loading="editLoading" size="mini" type="primary" @click.native="saveFormData()" >保存修改</el-button>
            </el-form-item>
        </el-form>
            

    </div>
</template>

<script>

import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import permission from '@/directive/permission/index.js' // 权限判断指令
import CmUpload from '@/components/CmUpload' // 上传图片组件引入
export default {
    name: 'SystemUser',
    components: { Pagination ,CmUpload },
    directives: { waves, permission },
    filters: { },
    data() {
        return {
            formFields: [
                { prop: 'username', label: '用户名', minWidth: 120 },
                { prop: 'realname', label: '真实姓名', minWidth: 80 },
                { prop: 'avatar', label: '头像', minWidth: 144, imgFlag: true, type: 2 },
                { prop: 'sex', label: '性别', minWidth: 60, type: 1, dataSource: [{ 'value': '0', 'text': '女' }, { 'value': '1', 'text': '男' }] },
                { prop: 'phone', label: '手机', minWidth: 100 },
                { prop: 'email', label: '邮箱', minWidth: 120 },
                { prop: 'roleIds', label: '用户角色', type: 3, options: [] }
            ],
            editLoading: false, // 保存表单时loading框
            // 新增编辑界面数据
            dataForm: {},
            // 表单检验规则
            dataFormRules: {
                username: [{ required: true, message: '请输入登录用户名', trigger: 'blur' }],
                realname: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
                phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
                roleIds: [{ required: true, message: '请选择用户角色', trigger: 'change' }]
            }
        }
    },
    computed: {

    },
    mounted: function() {
        
    },
    created() {
        
        this.initDataForm();

       

    },
    methods: {
     
        // 初始化进入 获取用户信息
        initDataForm(){
            this.$api.getUserInfoById( {userId : this.$store.getters.userInfo.id } ).then( res=> {
                this.dataForm = res.data;
            })
        },

        // 保存表单数据
        saveFormData() {
            this.$refs['dataForm'].validate((valid) => {
                if (!valid) {
                    return false
                } else {
                    this.editLoading = true
                    // 【API请求】----保存数据
                    this.$api.updateUserInfo(this.dataForm).then(() => {
                        this.editLoading = false// 关闭loading框
                        this.initDataForm()// 重置表单数据
                        this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
                    })
                }
            })
        },
        

         
     

    }
}
</script>
<style>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
